<template>
	<view class="content">
		<input class="uni-input" v-model="FormData.title" focus placeholder="标题" />
		<hr>
		<textarea class="area" v-model="FormData.content" maxlength="10000" cols="30" rows="10" placeholder="请输入内容" />
		<view class="example-body">
			<image v-for="(i,idx) in FormData.images" :key="idx" :src="i" class="imgs" />
		</view>
	</view>
	<view class="footer">
		<view>
			<uni-icons type="image" size="40" @click="uploads"></uni-icons>
			<uni-icons type="location" size="40" @click="address"></uni-icons>
		</view>
		<view>
			<button class='mini-btn' @click="add" type="primary" size="mini">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					title: '',
					content: '',
					images:[]
				},
				isTrue: 'true'
			};
		},
		methods: {
			upImg() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			address() {
				let aaa = ""
				function Location() {};
				//定义一个可以获得经纬度的方法
				Location.prototype.getLocation = function(callback) {
					var options = {
						enableHighAccuracy: true,
						maximumAge: 1000
					};
					this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?
						callback :
						function(address) {
							// alert(address.province + address.city);
							console.log("getocation(callbackFunction) 可获得定位信息对象");
						};
					var self = this;
					if (navigator.geolocation) {
						//浏览器支持geolocation
						navigator.geolocation.getCurrentPosition(function(position) {
							//经度
							var longitude = position.coords.longitude;
							//纬度
							var latitude = position.coords.latitude;
							self.loadMapApi(longitude, latitude);
						}, self.onError, options);
					} else {
						//浏览器不支持geolocation
					}
				};
				//定义一个可以解析经纬度的方法，调用百度的api
				Location.prototype.loadMapApi = function(longitude, latitude) {
					var self = this;
					var oHead = document.getElementsByTagName('HEAD').item(0);
					var oScript = document.createElement("script");
					oScript.type = "text/javascript";
					oScript.src = "http://api.map.baidu.com/getscript?v=2.0&ak=sKfS9qs40a8cegV6LOxGbCSPSQOCSGTe";
					oHead.appendChild(oScript);
					oScript.onload = function(date) {
						var point = new BMap.Point(longitude, latitude);
						var gc = new BMap.Geocoder();
						gc.getLocation(point, function(rs) {
							var addComp = rs.addressComponents;
							self.callback(addComp);
						});
					}
				};
				//定义出现查询位置出现意外的方法
				Location.prototype.onError = function(error) {
					switch (error.code) {
						case 1:
							alert("位置服务被拒绝");
							break;
						case 2:
							alert("暂时获取不到位置信息");
							break;
						case 3:
							alert("获取信息超时");
							break;
						case 4:
							alert("未知错误");
							break;
					}
				};
				let local = new Location();
				
				let defaultCity = local.getLocation(function (res) {
				    let strs = Object.values(res)
				    let str = ""
					strs.reverse().forEach(i => {
						str += i
					})
				    let reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
				    // str : 河北省保定市竞秀区乐凯北大街辅路
				    // city : 河北省,保定市,竞秀区
				    let city = str.match(reg)
					aaa = str
				})
				uni.showLoading({
					title:'正在获取位置信息'
				})
				setTimeout(()=>{
					this.FormData.content += `#${aaa}`
					uni.hideLoading()
				},3000)
				
			},
			add() {
				if (this.FormData.title && this.FormData.content) {
					uni.request({
						url: 'http://192.168.1.19:3366/zt/addForum',
						method: 'POST',
						data: this.FormData,
						success({
							data
						}) {
							uni.showToast({
								title:data.msg
							})
							uni.switchTab({
								url: '/pages/web/cp/Home',
							});
						}
					})
				} else {
					uni.showToast({
						title: '标题、内容不能为空',
						icon: 'none'
					});
				}
			},
			// 上传图片
			uploads(e) {
				let img = ""
				uni.chooseImage({
					count: 5, //默认最多5张
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'], //从相册选择
					success(res) {
						let uploadTask = uni.uploadFile({
							url: 'http://127.0.0.1:3366/imgs',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(uploadres) {
								img = uploadres.data
							}
						})
					}
				})
				setTimeout(() => {
					this.FormData.images.push(img)
				}, 5000)
			},
		}
	};
</script>

<style scoped>
	.content {
		margin: 10px;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer>view {
		margin: 0 10px;
	}

	uni-input {
		margin-bottom: 5px;
	}

	textarea {
		margin-top: 5px;
		width: 100%;
		height: 400px;
	}
	
	.example-body {
		display: inline-flex;
		flex-wrap: wrap;
	}
	
	.btimg {
		width: 36px;
		height: 36px;
	}
</style>